<template>
	<view class="">
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<uni-nav-bar left-icon="back" title="修改密码" backgroundColor="#EE515A" color="#ffffff" @clickLeft="handleBack"></uni-nav-bar>
		<view class="bg_FFFFFF fromBox">
			<view class="cu-form-group">
				<view class="title text-black">
					<image src="/static/imgs/login_slices/password.png" mode="widthFix" style="width: 40rpx"></image>
				</view>
				<input placeholder="请输入旧密码" name="input"  v-model="user.oldPwd" :password="!showOldPwd"></input>
				<view @tap="showOldPwd = !showOldPwd">
					<image src="/static/shilu-login/cl.png" mode="widthFix" style="width:45rpx;" v-if="!showOldPwd"></image>
					<image src="/static/images/icon/openpwd.png" mode="widthFix" style="width:45rpx;" v-else></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title text-black">
					<image src="/static/imgs/login_slices/password.png" mode="widthFix" style="width: 40rpx"></image>
				</view>
				<input placeholder="输入新密码" name="input" v-model="user.pwd" :password="!showPwd"></input>
				<view @tap="showPwd = !showPwd">
					<image src="/static/shilu-login/cl.png" mode="widthFix" style="width:45rpx;" v-if="!showPwd"></image>
					<image src="/static/images/icon/openpwd.png" mode="widthFix" style="width:45rpx;" v-else></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title text-black">
					<image src="/static/imgs/login_slices/password.png" mode="widthFix" style="width: 40rpx"></image>
				</view>
				<input placeholder="再次输入新密码" name="input" v-model="user.npwd" :password="!showNpwd"></input>
				<view @tap="showNpwd = !showNpwd">
					<image src="/static/shilu-login/cl.png" mode="widthFix" style="width:45rpx;" v-if="!showNpwd"></image>
					<image src="/static/images/icon/openpwd.png" mode="widthFix" style="width:45rpx;" v-else></image>
				</view>
			</view>
		</view>
		<view class="padding-lr-xl padding-top-lg flex flex-direction">
			<button class="cu-btn lg" @click="confirm" style="background-color: #EE515A;color: #FFFFFF;">确认修改</button>
		</view>

		<!-- 新版本 end -->
	</view>
</template>

<script>

	export default {

		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				background: {
					backgroundColor: 'rgb(222, 46, 46)',
				},
				color: "#fff",
				user: {
					oldPwd: "",
					pwd: '',
					npwd: '',
					code: ""
				},
				codeTips: '发送验证码',
				labelPosition: 'left',
				border: false,
				
				showOldPwd:false,//是否显示旧密码
				showPwd:false,//是否显示新密码
				showNpwd:false,//是否显示再次输入的密码
			};
		},
		onLoad(option) {},
		methods: {
			//返回上一级页面
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 跳转页面
			tonavigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 新增方案
			// 获取验证码
			getCode() {
				let that = this;
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				setTimeout(() => {
					that.$Request.post(this.$api.index.sendMsg2).then(res => {
						uni.showToast({
							title: res.msg,
							mask: false,
							duration: 1000,
							icon: "none"
						});
					})

				}, 2000);
				let num = 60;
				this.codeTips = "60秒重新获取";
				let timer = setInterval(() => {
					num--;
					this.codeTips = num + "秒重新获取";
					if (num == 0) {
						clearInterval(timer);
						this.codeTips = "发送验证码";
					}
				}, 1000);

			},
			//提交
			confirm() {
				if (!this.user.oldPwd) {
					uni.showToast({
						icon: "none",
						title: "请输入旧密码！",
						duration: 3000
					});
					return;
				}
				// if (!this.user.code) {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: "验证码！",
				// 		duration: 3000
				// 	});
				// 	return;
				// }
				if (!this.user.pwd) {
					uni.showToast({
						icon: "none",
						title: "请输入新密码！",
						duration: 3000
					});
					return;
				}
				if (!this.user.npwd) {
					uni.showToast({
						icon: "none",
						title: "请输入确认密码！",
						duration: 3000
					});
					return;
				}
				if (this.user.pwd != this.user.npwd) {
					uni.showToast({
						icon: "none",
						title: "输入的两次密码不一致！",
						duration: 3000
					});
					return;
				}

				this.$Request.post(this.$api.index.updatePwd, {
					pwd: this.user.pwd,
					oldPwd: this.user.oldPwd,
					code: this.user.code
				}).then(res => {

					uni.showToast({
						icon: "none",
						title: res.msg,
						duration: 1000
					});
					
					if (res.code == 200) {
						uni.navigateTo({
							url: '/pages/public/login/login',
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./changePwd.scss";
	page{
		background-color: #FFFFFF;
	}
	.all {
		background-color: #FFFFFF;
	}

	.confirm {
		padding: 30rpx 0;

		button {
			color: #ffffff;
			background-color: red;
			width: 80%;
			height: 10%;
		}
	}
	.cu-form-group uni-input{
		color: #333333;
	}
	.cu-form-group{
		background-color: #FFFFFF;
		padding: 24rpx 0;
		border-bottom: 1px solid #DDDDDD;
	}
	.fromBox{
		padding: 68rpx;
		.title{
			// min-width: 175rpx;
			height: auto !important;
			line-height: 16rpx !important;
		}
		.active{
			border-bottom: 1px solid #F24957;
		}
	}
	.bgc {
		background-color: #ffffff;
	}
</style>
